<template>
  <div class="holdActivityList">
    <div class="wrapper">
      <div class="item" v-for="(item,index) of holdActivityListData" :key="index" @click="navigateToDetail(item.id)"> 
        <div class="tit">
          <span class="tit_vertical"></span>
          <span class="tit_name">【{{item.name}}】</span>
        </div>
        <div class="post">
          <img :src="item.img_url" alt="" mode="widthFill">
        </div>
        <div class="msg">
          <div class="msg_desc">{{item.desc}}</div>
          <div class="msg_detail">
            <div class="msg_detail_time"> 
              <i class="data-icon icon-public"></i>
              <span>{{item.date_start}}&nbsp; {{item.day_start}}</span>
            </div>
            <div class="msg_detail_address"><i class="position-icon icon-public"></i><span v-if="item.province"> {{item.province}}{{item.city}}{{item.area}}</span></div>
          </div>
        </div>
        <div class="btn_wrapper">
          <div class="btn" @click.stop="deleteActivity(item)">删除活动</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { setTimeout } from 'timers';
export default {
  name:'holdActivityList',
  data() {
    return {
      page:0,
      holdActivityListData:[],
      reNewFlag:''
    }
  },
  methods: {
    async getHoldActivityListData(){
      //获取我发起的活动
      var userToken=wx.getStorageSync('userToken');
      const res=await this.$request.getData('/center/getUserInitiateActivityList',{
        user_token: userToken,
        page:this.page
      })
      if(res.data.level=='success'){
        wx.stopPullDownRefresh()
        const initArr=res.data.activities;
        initArr.forEach((item,index,arr)=>{
          const date=this.filterTime(item.start_time)
          arr[index].date_start=date.date;
          arr[index].day_start=date.day
        })
        if(this.reNewFlag){
          //更新数据
          this.holdActivityListData=initArr;
          this.reNewFlag=false;
        }else{
          this.holdActivityListData=[...this.holdActivityListData,...initArr]
        }
        
      }else{
        this.$currency.showToast(res.data.message)
      }
    },
    async deleteActivity(item){
     const state=await this.$currency.showModal('删除活动吗','','')
     if(state){
       const userToken=wx.getStorageSync('userToken');
       var res=await this.$request.postData('/activity/delActivity',{
         user_token:userToken,
         id:item.id
       })
       this.$currency.showToast(res.data.message)
       setTimeout(()=>{
         if(res.data.level=='success'){
         this.reNewFlag=true;
         this.page=0;
         this.getHoldActivityListData();
       }
       },1500)
     }
    },
    navigateToDetail(id){
      wx.navigateTo({
        url: '/pages/detail/main?id='+id
      })
    },
     filterTime(time){
      let arrTime = time.split(" ");
      let arrDate = arrTime[0].split("-");
      let date = `${arrDate[0]}年${arrDate[1]}月${arrDate[2]}日`;
      let day = this.filterDay(new Date(arrTime[0]).getDay());
      return{
        date,day
      }
    },
    //转化为中文星期几
    filterDay(day){
      let text = "";
      switch (day){
        case 0:
          text = "星期日";
          break;
        case 1:
          text = "星期一";
          break;
        case 2:
          text = "星期二";
          break;
        case 3:
          text = "星期三";
          break;
        case 4:
          text = "星期四";
          break;
        case 5:
          text = "星期五";
          break;
        case 6:
          text = "星期六";
          break;
      }
      return text
    }
  },
  onReachBottom(){
    this.page++;
    this.getHoldActivityListData();
  },
  onPullDownRefresh () {
    this.reNewFlag=true;
    this.page=0
    this.getHoldActivityListData();
  },
  onLoad(){
    this.page=0;
    this.holdActivityListData=[];
    this.reNewFlag='';
    this.getHoldActivityListData()
  }
}
</script>

<style lang="scss" scoped>
.holdActivityList{
  font-size: 14px;
  background: #eee;
  width: 100%;
  min-height: 100vh;
}
.wrapper{
  padding-top:30px;
}
.item{
  background: #fff;
  margin:10px 0;
}
.tit{
  padding:15px 0;
  height: 14px;
  display: flex;
  align-items: center;
  &_name{
    line-height: 14px;
  }
  &_vertical{
    width: 3px;
    height: 14px;
    background-color: black;
    display: inline-block;
    margin:0 10px
  }
}
.post{
  width: 100%;
  margin-top:10px;
  img{
    width: 100%;
  }
}

.msg{
  color:gray;
  &_detail{
    display:flex;
    align-items: center;
    justify-content: space-between;
  }
  &_desc{
    font-size: 16px;
    padding:10px;
  }
  &_detail_time{
    margin-left: 10px;
  }
  &_detail_address{
    margin-right: 10px;
  }
  &_detail_time,&_detail_address{
    display: flex;
    align-items: center;
  }
}
  .icon-public{
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center center
  }
        
  .data-icon{
    background-image: url(../../../static/images/time.png)     
  }
  .position-icon{
    background-image: url(../../../static/images/position.png)   
  }
          
  .btn_wrapper{
    display: flex;
    flex-direction: row-reverse;
    padding:10px 20px;
    .btn{
      color: #fff;
      background: rgb(214, 137, 35);
      padding:10px;
      width: 120px;
      text-align: center;
      border-radius: 10px;
    }
  }
</style>

